<!--
 * @Author: lailifang
 * @Date: 2022-03-15 17:15:54
 * @Description: 地图
-->
<template>
  <div class="map">
    <div
      :class="['button', { active: adcode === '650000' }]"
      @click="handleBtnClick"
    >
      新疆
    </div>
    <charts :params="mapState.params"></charts>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, watch } from 'vue'
import { useStore } from 'vuex'
import httpRequest from '@/service'
import { gradientColor } from '@/charts/utils'
export default defineComponent({
  name: 'fmap',
  components: {},
  props: {
    timeValue: {
      type: Array,
      default: () => {
        return []
      }
    },
    warningId: {
      type: String,
      default: ''
    },
    classId: {
      type: String,
      default: ''
    },
    adCode: {
      type: String,
      default: ''
    }
  },
  emits: ['change'],
  setup(props, { emit }) {
    const store = useStore()
    interface IChartState {
      params: any
    }
    const adcode = ref('all')
    // 地图
    const mapState = reactive<IChartState>({
      params: {
        loading: true,
        chartInstance: null,
        forceRedraw: true,
        map: {
          value: '数量'
        },
        adcode: '650000',
        position: {
          西宁市: [101.438463, 36.827772],
          海东市: [102.344727, 36.335094],
          海北州: [100.299858, 37.765164],
          黄南州: [101.484693, 34.782539],
          海南州: [100.253142, 35.908253],
          果洛州: [99.415532, 34.124188],
          玉树州: [94.307972, 34.231012],
          海西州: [95.116879, 37.239284]
        },
        options: {
          dataset: {
            dimensions: [],
            source: []
          },
          dataZoom: {
            disabled: true
          },
          xAxis: {
            disabled: true
          },
          yAxis: {
            disabled: true
          },
          visualMap: [
            {
              type: 'piecewise',
              pieces: [],
              show: true,
              left: 50,
              bottom: 50,
              align: 'left',
              orient: 'vertical',
              itemWidth: 30,
              itemHeight: 15,
              showLabel: true,
              itemGap: 5,
              textStyle: {
                color: '#fff',
                fontSize: 16
              }
            }
          ],
          legend: {
            show: false
          },
          tooltip: {
            show: false
          },
          geo: [
            {
              map: '650000',
              roam: false,
              top: '15%',
              left: '10%',
              aspectScale: 0.85,
              zoom: 1.1,
              label: {
                show: true,
                color: '#fff',
                fontSize: 14,
                fontFamily: 'SingyiEG',
                formatter: (params: any) => {
                  let result = ''
                  let itemdata = mapState.params.options.series[0].data.filter(
                    (item: any) => {
                      return item.name === params.name
                    }
                  )[0]
                  let value = itemdata ? itemdata.value : 0
                  result = `{name|${params.name}}\n{value|${
                    value > 0 ? value : ''
                  }}`
                  return result
                },
                rich: {
                  name: {
                    fontSize: 14,
                    lineHeight: 25,
                    fontWeight: 'normal',
                    fontFamily: 'AliHYAiHei',
                    textShadowColor: 'rgba(0,0,0,.5)',
                    textShadowBlur: 10,
                    textShadowOffsetX: 0,
                    textShadowOffsetY: 5
                  },
                  value: {
                    fontSize: 16,
                    lineHeight: 35,
                    fontWeight: 'normal',
                    fontFamily: 'AliHYAiHei',
                    color: '#ffc22f',
                    textShadowColor: 'rgba(0,0,0,.5)',
                    textShadowBlur: 5,
                    textShadowOffsetX: 0,
                    textShadowOffsetY: 0
                  }
                }
              },
              itemStyle: {
                areaColor: '#17adbc',
                borderColor: '#fff',
                borderWidth: 2,
                shadowColor: 'rgba(0,0,0,0.6)',
                shadowBlur: 10,
                shadowOffsetX: 5,
                shadowOffsetY: 5
              },
              emphasis: {
                itemStyle: {
                  areaColor: gradientColor(['#efde1f', '#ea690a']),
                  borderColor: 'rgba(255,255,255,0.8)',
                  borderWidth: 1
                },
                label: {
                  color: '#fff',
                  rich: {
                    name: {
                      fontSize: 14,
                      lineHeight: 25,
                      fontWeight: 'normal',
                      fontFamily: 'AliHYAiHei',
                      textShadowColor: 'rgba(0,0,0,.5)',
                      textShadowBlur: 10,
                      textShadowOffsetX: 0,
                      textShadowOffsetY: 5
                    },
                    value: {
                      fontSize: 16,
                      lineHeight: 35,
                      fontWeight: 'normal',
                      fontFamily: 'AliHYAiHei',
                      color: '#fff'
                    }
                  }
                }
              },
              select: {
                itemStyle: {
                  areaColor: gradientColor(['#efde1f', '#ea690a']),
                  borderColor: 'rgba(255,255,255,0.8)',
                  borderWidth: 1
                },
                label: {
                  color: '#fff',
                  rich: {
                    name: {
                      fontSize: 16,
                      lineHeight: 24,
                      fontWeight: 'normal',
                      fontFamily: 'AliHYAiHei',
                      textShadowColor: 'rgba(0,0,0,.5)',
                      textShadowBlur: 10,
                      textShadowOffsetX: 0,
                      textShadowOffsetY: 5
                    },
                    value: {
                      fontSize: 18,
                      lineHeight: 30,
                      fontWeight: 'normal',
                      fontFamily: 'AliHYAiHei',
                      color: '#fff'
                    }
                  }
                }
              },
              z: 3
            }
          ],
          series: [
            {
              type: 'map',
              map: '650000',
              geoIndex: 0,
              aspectScale: 0.85,
              zoom: 1.1,
              data: []
            },
            {
              type: 'map',
              map: '650000',
              aspectScale: 0.85,
              zoom: 1.1,
              top: '15.7%',
              left: '11.7%',
              silent: true,
              itemStyle: {
                areaColor: '#064c8c',
                borderColor: 'rgba(255,255,255,0.5)',
                borderWidth: 1,
                shadowColor: 'rgba(0,0,0,1)',
                shadowBlur: 20,
                shadowOffsetX: 5,
                shadowOffsetY: 5
              }
            },
            {
              type: 'scatter',
              coordinateSystem: 'geo',
              data: [],
              symbolSize: (val: any) => {
                let levelArr = ['01', '02', '03']
                return levelArr.includes(val[3]) ? 18 : 0
              },
              symbolOffset: [0, -4],
              symbol: (value: any) => {
                let img = ''
                if (value[3] === '01') {
                  // 红色
                  img = `image://data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAMAAACeyVWkAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABGlBMVEX/OgWAgID/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgX/OgUAAACXWH/hAAAAXHRSTlMAACvhPK8fRVshJONEWuI7kQ9PFXVco4VwnzoTtMW3fSkK+2UQfv6MC1kt0SK7Euc4KnbfLmLdJnFyJ4iltatUhnPwvanP96jp5fQwum+/mPqtbo6N5u+Pet789u6qxksAAAABYktHRF2d3zABAAAACXBIWXMAAAsSAAALEgHS3X78AAAAB3RJTUUH5gMTERkSfJjBiQAAAO9JREFUGNNtj9dWAkEQRGuVVRARBBRzFjGgYBYFAyqIiglz/f932NMzy1mP1kNN153QPUCgnt6IWTwjzX6feD+j4rFoQAcYFx9kQnyIAUWSKWA4nQGyHOlSjObc42Pj9t2JSY2x7NT0zOycdpuPYIGLS8BynqoVeIVVEmvr3IDPQEVvk1sluVzGtoL4jvGUt2u7ZeyxvX1dDtwMh5qOKnbz2NETE/LIWVp1tGZCAqdn5xdS1B29lPoKBaByrVNY2pC6edO6RctcugtREe75lxbL/If67d/0QdOj+/OToc8vnVeG9dZ5/8CnKcL6Ir9/AEVFTs0KWpg6AAAAAElFTkSuQmCC`
                } else if (value[3] === '02') {
                  // 黄色
                  img = `image://data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAMAAACeyVWkAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABGlBMVEX/9gWAgID/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gX/9gUAAADdtvJSAAAAXHRSTlMAACvhPK8fRVshJONEWuI7kQ9PFXVco4VwnzoTtMW3fSkK+2UQfv6MC1kt0SK7Euc4KnbfLmLdJnFyJ4iltatUhnPwvanP96jp5fQwum+/mPqtbo6N5u+Pet789u6qxksAAAABYktHRF2d3zABAAAACXBIWXMAAAsSAAALEgHS3X78AAAAB3RJTUUH5gMTERoTILKi3AAAAO9JREFUGNNtj9dWAkEQRGuVVRARBBRzFjGgYBYFAyqIiglz/f932NMzy1mP1kNN153QPUCgnt6IWTwjzX6feD+j4rFoQAcYFx9kQnyIAUWSKWA4nQGyHOlSjObc42Pj9t2JSY2x7NT0zOycdpuPYIGLS8BynqoVeIVVEmvr3IDPQEVvk1sluVzGtoL4jvGUt2u7ZeyxvX1dDtwMh5qOKnbz2NETE/LIWVp1tGZCAqdn5xdS1B29lPoKBaByrVNY2pC6edO6RctcugtREe75lxbL/If67d/0QdOj+/OToc8vnVeG9dZ5/8CnKcL6Ir9/AEVFTs0KWpg6AAAAAElFTkSuQmCC`
                } else if (value[3] === '03') {
                  // 绿色
                  img = `image://`
                  // img = `image://data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAMAAACeyVWkAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABGlBMVEX/mmuAgID/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmv/mmsAAAC6eiS7AAAAXHRSTlMAACvhPK8fRVshJONEWuI7kQ9PFXVco4VwnzoTtMW3fSkK+2UQfv6MC1kt0SK7Euc4KnbfLmLdJnFyJ4iltatUhnPwvanP96jp5fQwum+/mPqtbo6N5u+Pet789u6qxksAAAABYktHRF2d3zABAAAACXBIWXMAAAsSAAALEgHS3X78AAAAB3RJTUUH5gQGEQkEF2kdNAAAAO9JREFUGNNtj9dWAkEQRGuVVRARBBRzFjGgYBYFAyqIiglz/f932NMzy1mP1kNN153QPUCgnt6IWTwjzX6feD+j4rFoQAcYFx9kQnyIAUWSKWA4nQGyHOlSjObc42Pj9t2JSY2x7NT0zOycdpuPYIGLS8BynqoVeIVVEmvr3IDPQEVvk1sluVzGtoL4jvGUt2u7ZeyxvX1dDtwMh5qOKnbz2NETE/LIWVp1tGZCAqdn5xdS1B29lPoKBaByrVNY2pC6edO6RctcugtREe75lxbL/If67d/0QdOj+/OToc8vnVeG9dZ5/8CnKcL6Ir9/AEVFTs0KWpg6AAAAAElFTkSuQmCC`
                } else {
                  img = ''
                }
                return img
              },
              legendHoverLink: false,
              zlevel: 2
            }
          ]
        },
        event: {
          click: (params: any) => {
            // 清除默认选中
            mapState.params.options.series[0].data.forEach((item: any) => {
              if (props.adCode === item.adcode) {
                mapState.params.chartInstance.dispatchAction({
                  type: 'unselect',
                  seriesIndex: 0,
                  name: item.name
                })
              }
            })
            adcode.value =
              adcode.value === params.data.adcode ? 'all' : params.data.adcode
            emit('change', adcode.value)
          },
          customEvent: (chartInstance: any) => {
            // 保存下echarts实例
            mapState.params.chartInstance = chartInstance
            setTimeout(() => {
              // 添加默认选中
              mapState.params.options.series[0].data.forEach((item: any) => {
                if (props.adCode === item.adcode) {
                  adcode.value = props.adCode
                  mapState.params.chartInstance.dispatchAction({
                    type: 'select',
                    seriesIndex: 0,
                    name: item.name
                  })
                }
              })
            }, 0)
            emit('change', adcode.value)
          }
        },
        custom: true
      }
    })
    const getData = () => {
      mapState.params.loading = true
      httpRequest
        .get({
          url: 'M4Map',
          params: {
            warningId: props.warningId,
            classId: props.classId,
            // startTime: props.timeValue[0],
            // endTime: props.timeValue[1]
            startTime: store.state.globalDate.startDate,
            endTime: store.state.globalDate.endDate
          }
        })
        .then((res) => {
          if (res.pieces.length === 1 && !res.pieces[0].max) {
            const pie = { ...res.pieces[0], max: '10' }
            mapState.params.options.visualMap[0].pieces = [pie]
          } else {
            mapState.params.options.visualMap[0].pieces = res.pieces
          }
          mapState.params.options.series[0].data = res.data
          mapState.params.options.series[2].data = convertData(res.data)
          console.log(res.data)
          mapState.params.loading = false
        })
        .catch(() => {
          console.log('请求失败')
        })
    }
    const convertData = (data: any) => {
      let scatterData = []
      for (var i = 0; i < data.length; i++) {
        var geoCoord = mapState.params.position[data[i].name]
        if (geoCoord) {
          scatterData.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value, data[i].warnLevel)
          })
        }
      }
      return scatterData
    }
    getData()
    // 全省按钮
    const handleBtnClick = () => {
      adcode.value = adcode.value !== '650000' ? '650000' : 'all'
      // 清除地图默认选中
      mapState.params.options.series[0].data.forEach((item: any) => {
        mapState.params.chartInstance.dispatchAction({
          type: 'unselect',
          seriesIndex: 0,
          name: item.name
        })
      })
      emit('change', adcode.value)
    }
    watch(
      () => [props.warningId, props.classId, props.timeValue],
      () => {
        getData()
      }
    )
    const refreshData = () => {
      getData()
    }
    return {
      mapState,
      adcode,
      handleBtnClick,
      refreshData
    }
  }
})
</script>
<style lang="less" scoped>
.map {
  position: absolute;
  left: 515px;
  top: 165px;
  width: calc(100% - 1005px);
  height: 748px;
  .button {
    position: absolute;
    top: 35px;
    right: 60px;
    width: 44px;
    z-index: 99;
    padding: 30px 0;
    font-size: 26px;
    font-weight: 700;
    color: #ffc924;
    background-color: rgba(0, 71, 157, 0.8);
    border-radius: 10px;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
    &.active {
      background-image: linear-gradient(to top, #efde1f 0%, #ea690a 100%);
      color: #fff;
    }
  }
}
</style>
